<template>
  <el-container style="width:1850px;height:1070px;background-color: #06134A" onscroll="false">

    <el-header style="height: 10.5%" class="headerbackgroud">
      <div style="color: white;font-size: 30px;text-align: center;margin-top: 20px;margin-left: 70px">特种设备检测监测云平台</div>
      <el-card style="width:150px;height:50px;text-align:left;margin-left:80px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 6px;margin-top: -10px">
          大连特种设备工业有限公司
        </div>
      </el-card>
      <el-card style="width:127px;height:60px;align-items:right;margin-left:1600px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 2px;margin-top: -8px">
          {{dateFormat(date)}}
        </div>
      </el-card>
      <el-card style="width:120px;height:50px;align-items:right;margin-left:1450px;margin-top:-50px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 2px;margin-top: -8px">
        检验机构 云服务
        </div>
      </el-card>
    </el-header>

    <el-main style="height: 100%;">
      <el-header>
      <el-row style="margin-top: 10px; margin-left: 0px;">
        <el-col span="3" style="border: #4AB7BD 3px solid;	box-shadow:0px 0px  10px 5px #9E9E9E;">
          <div style="margin-left: 10px" class="select">
          省份
            <el-select v-model="location" placeholder="请选择" style="width: 150px" popper-append-to-body="false" class="hello">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col span="4"style="border: #4AB7BD 3px solid;	box-shadow:0px 0px  10px 5px #9E9E9E;">
          <div style="margin-left: 10px" class="select">
            城市 &nbsp;
            <el-select v-model="city" placeholder="请选择" style="width: 200px" popper-append-to-body="false" class="hello" >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col span="15" style="width: 450px;border: #4AB7BD 3px solid;	box-shadow:0px 0px  10px 5px #9E9E9E;">
          <div style="margin-left: 10px" class="select">
            检验机构 &nbsp;
            <el-select v-model="enterprises" placeholder="请选择" style="width: 300px" popper-append-to-body="false" class="hello">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!--<el-button class="filter-item" type="primary" icon="el-icon-search" @click="updateTemperatureChartAndTable">确定</el-button>-->
          </div>
        </el-col>
      </el-row>
      </el-header>
      <el-main style="width: 100%;height: 56%">
        <el-container style="height: 100%;width: 100%">
            <el-aside style="margin-left:10px;width: 50% ;height: 100%"><pie-chart></pie-chart></el-aside>

            <el-main style="width: 50%;height: 100%">
              <el-row style="width: 100%;height: 50%">
                <bar-chart></bar-chart>
              </el-row>
              <el-row style="width: 100%;height: 50%">
                <BarChart2></BarChart2>
              </el-row>
            </el-main>
        </el-container>
      </el-main>
      <el-footer style="width: 100%;height: 36%">


        <el-table :data="tableData" style="width: 100%;height: 100%" :row-style="getRowClass"
                  :header-cell-style="{background:'#101E44',color:'#606266'}" fit="true">
          <el-table-column
            prop="one"
            label="序列"
            width="100">
          </el-table-column>
          <el-table-column
            prop="two"
            label="所在单位"
            width="180">
          </el-table-column>
          <el-table-column
            prop="three"
            label="设备编号">
          </el-table-column>
          <el-table-column
            prop="four"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="five"
            label="风险评估">
          </el-table-column>
          <el-table-column
            prop="six"
            label="定期检验">
          </el-table-column>
          <el-table-column
            prop="seven"
            label="安全隐患">
          </el-table-column>
          <el-table-column
            prop="eight"
            label="健康诊断">
          </el-table-column>
          <el-table-column
            prop="nine"
            label="故障预测">
          </el-table-column>
        </el-table>

      </el-footer>
    </el-main>
  </el-container>
</template>

<script>
  import ElContainer from "element-ui/packages/container/src/main"
  import ElAside from "element-ui/packages/aside/src/main"
  import ElHeader from "element-ui/packages/header/src/main"
  import ElMain from "element-ui/packages/main/src/main"
  import PieChart from './components/PieChart'
  import BarChart from './components/BarChart'
  import BarChart2 from './components/BarChart2'

  import { get, get as userType, del, dels } from '@/api/sys/connSysAuthApi'
  import { parseTime } from '@/utils'
  import { req } from '@/api/base/BaseApi'

  export default {
    name: 'index',
    components: { BarChart2, BarChart, PieChart },
    comments: {
      ElMain,
      ElHeader,
      ElAside,
      ElContainer,
      PieChart,
      BarChart,
      BarChart2
    },
    methods: {
      dateFormat(time) {
        var date = new Date(time)
        var year=date.getFullYear()
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1
        var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate()
        var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours()
        var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes()
        var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds()
        // 拼接
        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
      },
      tableRowStyle({ row, rowIndex }) {
        return 'background-color: #02152f;color: #fff'
      },
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: #2ec7c9;color: #fff;font-weight: 500;'
        }
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      getRowClass({ row, column, rowIndex, columnIndex }) {
        return 'background:#06134A;color:#fff;'
      }
    },
    data() {
      return {
        date: new Date(),
        options1: [{
          value: '安徽省',
          label: '安徽省'
        }, {
          value: '辽宁省',
          label: '辽宁省'
        }, {
          value: '广东省',
          label: '广东省'
        }],
        location: '',
        options2: [{
          value: '铜陵市',
          label: '铜陵市'
        }],
        city: '',
        options: [{
          value: '铜陵市特种设备检测研究所',
          label: '铜陵市特种设备检测研究所'
        }],
        enterprises: '',
        tableData: [{
          one: '1',
          two: '铜陵华源麻业有限',
          three: 'KQ13063',
          four: '桥式',
          five: '高风险',
          six: '已检',
          seven: '查看',
          eight: '查看',
          nine: '10年'
        }, {
          one: '2',
          two: '铜陵有色金属集团',
          three: 'KQ13064',
          four: '门式',
          five: '高风险',
          six: '已检',
          seven: '查看',
          eight: '查看',
          nine: '10年'
        }, {
          one: '3',
          two: '铜陵有色金属集团',
          three: 'KQ13065',
          four: '桥式',
          five: '中风险',
          six: '已检',
          seven: '查看',
          eight: '查看',
          nine: '10年'
        }, {
          one: '4',
          two: '铜陵有色金属集团',
          three: 'KQ13063',
          four: '门式',
          five: '中风险',
          six: '未检',
          seven: '查看',
          eight: '查看',
          nine: '10年'
        }, {
          one: '5',
          two: '铜陵有色金属集团',
          three: 'KQ13063',
          four: '桥式',
          five: '中风险',
          six: '已检',
          seven: '查看',
          eight: '查看',
          nine: '10年'
        }, {
          one: '6',
          two: '铜陵有色金属集团',
          three: 'KQ13063',
          four: '门式',
          five: '中风险',
          six: '已检',
          seven: '查看',
          eight: '查看',
          nine: '10年'
        }]
      }
    },
    filters: {
      userTypeFilter(type) {
        let typeText = type
        userTypes.forEach((val) => {
          if (type === val.value) {
            typeText = val.name
          }
        })
        return typeText
      },
      menuFilter(ids) {
        let length = 0
        if (ids) {
          length = ids.length
        }
        return length
      },
      dateTimeFilter(time) {
        return parseTime(time)
      }
    },
    mounted() {
      let _this = this //声明一个变量指向vue实例this,保证作用域一致
      this.timer = setInterval(function() {
        _this.date = new Date()//修改数据date
      }, 1000)
    }
  }

</script>

<style lang="less" scoped>
  .headerbackgroud{
    background-image: url("../../../../assets/screen-header.jpg");
  }
  #text{
    -webkit-text-fill-color:white
  ;
  }
  .select{
    color: white;
  }
  .hello{
    // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
    /deep/ input::-webkit-input-placeholder {
      color: #fff;
    }
    /deep/  input::-moz-input-placeholder {
      color: #fff;
    }
    /deep/  input::-ms-input-placeholder {
      color: #fff;
    }

    //修改的是el-input的样式
    //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
    //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
    /deep/ .el-select,
    /deep/ .el-input,
    /deep/ .el-input__inner{
      background-color:#08164D ;
      color:#fff;
      border:0px;
      border-radius:0px;
      text-align: center;
    }
  }
</style>
